import { FC, useRef, memo } from 'react';
import echarts, { EChartsOption } from 'echarts';
import useECharts from '@/hooks/useECharts';
import { MinerStatus, OnlineMonitorModel } from '@/types/monitor';
import dayjs from 'dayjs';

interface IMinerOnlineChart {
  dataList: OnlineMonitorModel[] | undefined;
  xAxis: number[] | undefined;
}

const BaseChart: FC<IMinerOnlineChart> = (props) => {
  const { dataList, xAxis } = props;
  const divRef = useRef(null);

  const findMinerNumByStatus = (status: MinerStatus) => {
    if (!dataList) {
      return [];
    }
    return dataList.filter((l) => l.type === status).map((l) => l.num);
  };
  const option: EChartsOption = {
    tooltip: undefined,
    grid: {
      // left: '3%',
      top: 15,
      bottom: 25,
      left: 22,
      right: 22,
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis,
      axisLabel: {
        formatter(value: number) {
          return dayjs
            .unix(value)
            .format(xAxis && xAxis?.length < 7 ? 'HH' : 'MM-DD');
        },
      },
    },
    yAxis: {
      type: 'value',
    },
    color: ['#26C475', '#F5A623', '#F7481C', '#000000', '#999999'],
    series: [
      {
        name: '在线矿机',
        type: 'line',
        symbol: 'none',
        data: findMinerNumByStatus('online'),
        areaStyle: { color: '#E6F7F4' },
        itemStyle: {
          color: '#26C475',
        },
        label: {
          formatter: '1111',
        },
      },
      {
        name: '警告矿机',
        type: 'line',
        itemStyle: {
          color: '#F5A623',
        },
        areaStyle: { color: '#f5ab23' },
        symbol: 'none',
        data: findMinerNumByStatus('waring'),
      },
      {
        name: '异常矿机',
        type: 'line',
        areaStyle: { color: '#F2E2DE' },
        itemStyle: {
          color: '#F7481C',
        },
        symbol: 'none',
        data: findMinerNumByStatus('error'),
      },
      {
        name: '停机矿机',
        type: 'line',
        areaStyle: { color: '#E2E2E2' },
        itemStyle: {
          color: '#12263f',
        },
        symbol: 'none',
        data: findMinerNumByStatus('stop'),
      },
      {
        name: '离线矿机',
        type: 'line',
        itemStyle: {
          color: '#6d83a3',
        },
        areaStyle: { color: '#F4F4F4' },
        symbol: 'none',
        data: findMinerNumByStatus('offline'),
      },
    ],
  };
  useECharts(divRef, option, !!dataList);

  return <div ref={divRef} style={{ width: '100%', height: '146px' }}></div>;
};

export default memo(BaseChart);
